<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="用户account" id="i1">
    <input type="text" placeholder="用户名称" id="i2">
    <input type="text" placeholder="手机号" id="i3">
    <input type="button" value="添加" onclick="f1()">
    <table border="1">
        <caption>用户列表</caption>
        <tr>
            <th>用户</th>
            <th>用户名称</th>
            <th>手机号</th>
        </tr>
    </table>

</body>
<script>
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let i3 = document.querySelector("#i3");
    let tab = document.querySelector("table");

    function f1() {
        //tr和td的创建
        let tr = document.createElement("tr");
        let username = document.createElement("td");
        let nickname = document.createElement("td");
        let phone = document.createElement("td");
        //将用户输入的内容赋值给td
        username.innerText = i1.value;
        nickname.innerText = i2.value;
        phone.innerText = i3.value;
        //将td放到tr中
        tr.append(username,nickname,phone);
        //将tr放到table中
        tab.append(tr);
    }

</script>
</html>
